<!DOCTYPE html>
<html lang="en">
<head>
<title>用CSS3和jquery实现的图片墙效果</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="content">
  <header>
    <h1>A silent world</h1>
    <span>Image Wall with jQuery and CSS3</span> </header>
  <div class="iw_wrapper">
    <ul class="iw_thumbs" id="iw_thumbs">
      <li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb1"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb2"/>
        <div>
          <h2>Silence</h2>
          <p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </div>
      </li>
      <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/>
        <div>
          <h2>Abstraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/9.jpg" data-img="images/full/9.jpg" alt="Thumb9"/>
        <div>
          <h2>Greatness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/>
        <div>
          <h2>Abstraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/>
        <div>
          <h2>Beauty</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb12"/>
        <div>
          <h2>Greatness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/>
        <div>
          <h2>Growth</h2>
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
        </div>
      </li>
      <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/>
        <div>
          <h2>Beauty</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/>
        <div>
          <h2>Abstraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb12"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb3"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb4"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/12.jpg" data-img="images/full/12.jpg" alt="Thumb1"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb2"/>
        <div>
          <h2>Silence</h2>
          <p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </div>
      </li>
      <li><img src="images/thumbs/3.jpg" data-img="images/full/3.jpg" alt="Thumb3"/>
        <div>
          <h2>Abstraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb4"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/5.jpg" data-img="images/full/5.jpg" alt="Thumb5"/>
        <div>
          <h2>Growth</h2>
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
        </div>
      </li>
      <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb6"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/7.jpg" data-img="images/full/7.jpg" alt="Thumb7"/>
        <div>
          <h2>Beauty</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/8.jpg" data-img="images/full/8.jpg" alt="Thumb8"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/9.jpg" data-img="images/full/9.jpg" alt="Thumb9"/>
        <div>
          <h2>Greatness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/10.jpg" data-img="images/full/10.jpg" alt="Thumb10"/>
        <div>
          <h2>Abstraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/11.jpg" data-img="images/full/11.jpg" alt="Thumb11"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb12"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/13.jpg" data-img="images/full/13.jpg" alt="Thumb13"/>
        <div>
          <h2>Happiness</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/14.jpg" data-img="images/full/14.jpg" alt="Thumb14"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/2.jpg" data-img="images/full/2.jpg" alt="Thumb1"/>
        <div>
          <h2>Virtue</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/4.jpg" data-img="images/full/4.jpg" alt="Thumb2"/>
        <div>
          <h2>Serenity</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
      <li><img src="images/thumbs/6.jpg" data-img="images/full/6.jpg" alt="Thumb3"/>
        <div>
          <h2>Attraction</h2>
          <p>Far far away, behind the word mountains there live the blind texts.</p>
        </div>
      </li>
    </ul>
  </div>
  <div id="iw_ribbon" class="iw_ribbon"> <span class="iw_close"></span> <span class="iw_zoom">Click thumb to zoom</span> </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
